<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 页面头部 -->
    <div class="bg-white shadow-sm">
      <div class="container mx-auto px-4 py-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
          <div>
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">创建广告创意</h1>
            <p class="text-gray-500 mt-1">创建并设置您的广告创意内容和投放参数</p>
          </div>
          <div class="mt-4 md:mt-0 flex space-x-3">
            <button type="button" class="px-4 py-2 bg-white border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
              <i class="fa fa-question-circle mr-1"></i>帮助
            </button>
            <button type="button" class="px-4 py-2 bg-white border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
              <i class="fa fa-save mr-1"></i>保存草稿
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="container mx-auto px-4 py-6">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- 左侧边栏 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-lg shadow-sm sticky top-24">
            <div class="p-4 border-b border-gray-100">
              <h3 class="font-medium text-gray-800">广告创意管理</h3>
            </div>
            <nav class="p-2">
              <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-900 bg-primary/10 rounded-md mb-1">
                <i class="fa fa-plus-circle mr-2 text-primary"></i>创建创意
              </a>
              <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 rounded-md mb-1">
                <i class="fa fa-list mr-2"></i>创意列表
              </a>
              <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 rounded-md mb-1">
                <i class="fa fa-line-chart mr-2"></i>创意数据
              </a>
              <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 rounded-md mb-1">
                <i class="fa fa-cog mr-2"></i>创意模板
              </a>
              <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 rounded-md">
                <i class="fa fa-history mr-2"></i>审核记录
              </a>
            </nav>
          </div>
          
          <!-- 帮助卡片 -->
          <div class="mt-6 bg-white rounded-lg shadow-sm p-4">
            <h3 class="font-medium text-gray-800 mb-3">需要帮助？</h3>
            <p class="text-sm text-gray-600 mb-3">查看创意创建指南，了解最佳实践</p>
            <a href="#" class="text-primary text-sm hover:underline flex items-center">
              <i class="fa fa-external-link mr-1"></i>创意创建指南
            </a>
          </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="lg:col-span-3">
          <!-- 进度指示器 -->
          <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-2">1</div>
                <span class="text-sm font-medium">创建创意</span>
              </div>
              <div class="h-1 flex-1 mx-4 bg-gray-200 rounded-full">
                <div class="h-1 bg-primary rounded-full" style="width: 25%"></div>
              </div>
              <div class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mr-2">2</div>
                <span class="text-sm text-gray-500">审核</span>
              </div>
              <div class="h-1 flex-1 mx-4 bg-gray-200 rounded-full"></div>
              <div class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mr-2">3</div>
                <span class="text-sm text-gray-500">投放</span>
              </div>
            </div>
          </div>
          
          <!-- 创意表单 -->
          <AdCreativeForm />
          
          <!-- 创意预览 -->
          <div class="mt-6 bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-lg font-medium text-gray-800 mb-4">创意预览</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!-- 移动端预览 -->
              <div class="border border-gray-200 rounded-lg overflow-hidden">
                <div class="bg-gray-100 p-2 flex items-center justify-between">
                  <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-red-400 mr-1"></div>
                    <div class="w-3 h-3 rounded-full bg-yellow-400 mr-1"></div>
                    <div class="w-3 h-3 rounded-full bg-green-400"></div>
                  </div>
                  <span class="text-xs text-gray-500">移动端预览</span>
                </div>
                <div class="relative aspect-[9/16] bg-white">
                  <!-- 预览内容将根据选择的创意类型动态显示 -->
                  <div v-if="creativeForm.type === 'image'" class="absolute inset-0 flex flex-col">
                    <div class="flex-1 bg-gray-100 flex items-center justify-center">
                      <img v-if="creativeForm.mainImageUrl" :src="creativeForm.mainImageUrl" alt="广告主图" class="w-full h-full object-cover">
                      <div v-else class="text-center p-4">
                        <i class="fa fa-image text-4xl text-gray-300 mb-2"></i>
                        <p class="text-gray-400 text-sm">主图预览</p>
                      </div>
                    </div>
                    <div class="p-3 border-t border-gray-100">
                      <h4 class="font-medium text-sm">{{ creativeForm.title || '创意标题' }}</h4>
                      <p class="text-xs text-gray-500 mt-1 line-clamp-2">{{ creativeForm.description || '创意描述将显示在这里...' }}</p>
                      <div class="mt-3 flex justify-between items-center">
                        <span class="text-xs text-gray-400">腾讯广告</span>
                        <button class="px-2 py-1 text-xs bg-primary text-white rounded">查看详情</button>
                      </div>
                    </div>
                  </div>
                  
                  <div v-else-if="creativeForm.type === 'video'" class="absolute inset-0 flex flex-col">
                    <div class="flex-1 bg-black flex items-center justify-center">
                      <video v-if="creativeForm.videoUrl" :src="creativeForm.videoUrl" controls class="w-full h-full object-contain"></video>
                      <div v-else class="text-center p-4">
                        <i class="fa fa-file-video-o text-4xl text-gray-600 mb-2"></i>
                        <p class="text-gray-400 text-sm">视频预览</p>
                      </div>
                    </div>
                    <div class="p-3 border-t border-gray-100">
                      <h4 class="font-medium text-sm">{{ creativeForm.title || '视频广告标题' }}</h4>
                      <div class="mt-3 flex justify-between items-center">
                        <span class="text-xs text-gray-400">腾讯广告</span>
                        <button class="px-2 py-1 text-xs bg-primary text-white rounded">立即观看</button>
                      </div>
                    </div>
                  </div>
                  
                  <div v-else class="absolute inset-0 flex items-center justify-center">
                    <p class="text-gray-400">选择创意类型后预览将显示在这里</p>
                  </div>
                </div>
              </div>
              
              <!-- 桌面端预览 -->
              <div class="border border-gray-200 rounded-lg overflow-hidden">
                <div class="bg-gray-100 p-2 flex items-center justify-between">
                  <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-red-400 mr-1"></div>
                    <div class="w-3 h-3 rounded-full bg-yellow-400 mr-1"></div>
                    <div class="w-3 h-3 rounded-full bg-green-400"></div>
                  </div>
                  <span class="text-xs text-gray-500">桌面端预览</span>
                </div>
                <div class="relative aspect-[16/9] bg-white">
                  <!-- 预览内容将根据选择的创意类型动态显示 -->
                  <div v-if="creativeForm.type === 'image'" class="absolute inset-0 flex flex-col">
                    <div class="flex-1 bg-gray-100 flex items-center justify-center">
                      <img v-if="creativeForm.mainImageUrl" :src="creativeForm.mainImageUrl" alt="广告主图" class="w-full h-full object-cover">
                      <div v-else class="text-center p-4">
                        <i class="fa fa-image text-4xl text-gray-300 mb-2"></i>
                        <p class="text-gray-400 text-sm">主图预览</p>
                      </div>
                    </div>
                    <div class="p-4 border-t border-gray-100 flex items-center justify-between">
                      <div>
                        <h4 class="font-medium text-base">{{ creativeForm.title || '创意标题' }}</h4>
                        <p class="text-sm text-gray-500 mt-1">{{ creativeForm.description || '创意描述将显示在这里...' }}</p>
                      </div>
                      <button class="px-3 py-1.5 text-sm bg-primary text-white rounded">立即购买</button>
                    </div>
                  </div>
                  
                  <div v-else-if="creativeForm.type === 'video'" class="absolute inset-0 flex flex-col">
                    <div class="flex-1 bg-black flex items-center justify-center">
                      <video v-if="creativeForm.videoUrl" :src="creativeForm.videoUrl" controls class="w-full h-full object-contain"></video>
                      <div v-else class="text-center p-4">
                        <i class="fa fa-file-video-o text-4xl text-gray-600 mb-2"></i>
                        <p class="text-gray-400 text-sm">视频预览</p>
                      </div>
                    </div>
                    <div class="p-4 border-t border-gray-100 flex items-center justify-between">
                      <div>
                        <h4 class="font-medium text-base">{{ creativeForm.title || '视频广告标题' }}</h4>
                        <p class="text-sm text-gray-500 mt-1">品牌名称</p>
                      </div>
                      <button class="px-3 py-1.5 text-sm bg-primary text-white rounded">了解更多</button>
                    </div>
                  </div>
                  
                  <div v-else class="absolute inset-0 flex items-center justify-center">
                    <p class="text-gray-400">选择创意类型后预览将显示在这里</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AdCreativeForm from '@/components/creative/AdCreativeForm.vue';

export default {
  name: 'AdCreativePage',
  components: {
    AdCreativeForm
  },
  data() {
    return {
      creativeForm: {
        type: '',
        title: '',
        description: '',
        mainImageUrl: '',
        videoUrl: '',
        coverImageUrl: ''
      }
    }
  },
  methods: {
    // 监听子组件的表单数据变化
    handleFormDataChange(data) {
      this.creativeForm = { ...data };
    }
  }
}
</script>

<!-- <style scoped>
/* 自定义样式 */
.preview-device {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.preview-header {
  background-color: #f3f4f6;
  padding: 0.5rem;
  display: flex;
</style> -->